<template>
	<view class="content">
		<marketOrder :tabs="tabs" :dataConfig="marketConfig" @changeTabs="changeTabs" />
	</view>
</template>

<script>
	import {
		mapActions
	} from "vuex";
	import marketOrder from './components/marketOrder'
	export default {
		components: {
			marketOrder
		},
		data() {
			return {
				show: false,
				side: 'BUY',
				query: {
					status: '0',
					marketType: '0'
				},
				marketConfig: {
					page: 1,
					limit: 8,
					total: -1,
					pages: 0,
					list: [],
					loading: false,
					loadStatus: "",
					tabsIndex: 0,
					code: "",
				},
				tabs: [{
						code: '',
						name: '全部'
					},
					{
						code: '1',
						name: '待付款'
					},
					{
						code: '2',
						name: '已完成'
					},
					{
						code: '3',
						name: '已取消'
					}
				]
			}
		},
		onNavigationBarButtonTap() {
			this.show = true
		},
		onLoad(options) {
			this.side = options.side ? options.side : 'BUY'
			uni.setNavigationBarTitle({
				title: this.side == 'BUY' ? '我买入的' : '我卖出的'
			});
			this._getOrderList();
		},
		// 触底事件
		onReachBottom() {
			this._getOrderList(true);
		},
		onPullDownRefresh() {
			uni.startPullDownRefresh();
			this.initMarketConfig();
			this._getOrderList();
		},
		methods: {
			...mapActions('order', ['getOrderList']),
			_getOrderList(ReachBtm) {
				if (this.marketConfig.loading || this.marketConfig.loadStatus == "nomore") return;
				this.marketConfig.loading = true;
				this.marketConfig.loadStatus = "loading";
				if (ReachBtm) this.marketConfig.page++;
				this.getOrderList({
					page: this.marketConfig.page,
					limit: this.marketConfig.limit,
					side: this.side == 'BUY' ? 1 : 2,
					status: this.marketConfig.code,
				}).then(res => {
					this.marketConfig.list = this.marketConfig.list.concat(res.rows);
					this.marketConfig.pages = res.pages;
					this.marketConfig.total = res.total;
					this.marketConfig.loadStatus = this.marketConfig.page >= this.marketConfig.pages ? "nomore" : "loadmore" 
				}).finally(() => {
					this.marketConfig.loading = false;
					
					uni.stopPullDownRefresh();
				})
			},
			changeTabs(item) {
				this.marketConfig.tabsIndex = item.index;
				this.marketConfig.code = item.code;
				this.initMarketConfig();
				this._getOrderList();
			},
			initMarketConfig() {
				this.marketConfig.page = 1;
				this.marketConfig.total = -1;
				this.marketConfig.pages = 0;
				this.marketConfig.list = [];
				this.marketConfig.loading = false;
				this.marketConfig.loadStatus = "loadmore";
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0rpx 20rpx 20rpx 20rpx;
	}
</style>
